<template>
  <div>
    <div class="com-chart">
      <div class="scatter" ref="customer_scatter"></div>
      <div class="bar" ref="bar"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      allData:null,
      sales:[],
      sales_customers: []
    }
  },
  mounted() {
    this.initChart()
  },
  methods: {
    async initChart () {
      const {data : res} = await axios.get("https://vimeriochen.gitee.io/visualization/data/random_train.json");
      this.allData = res;
      for(let item in this.allData) {
          let arr = [];
          arr.push(this.allData[item]['Sales']);
          this.sales.push(this.allData[item]['Sales'])
          arr.push(this.allData[item]["Customers"]);
          this.sales_customers.push(arr);
      }
    //   console.log(this.sales_customers)
      const {data : ret} = await axios.get("https://vimeriochen.gitee.io/visualization/data/random_train.json");
      this.chartInstance = this.$echarts.init(this.$refs.customer_scatter,'walden')
      const initOptiona = {
        title: {
          text: '▎Sales - Customers',
        },
        grid: {
          top: '20%',
          left: '3%',
          right: '6%',
          bottom: '3%',
          containLabel: true // 距离是包含坐标轴上的文字
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          left: 'center'
        },
        xAxis: {},
        yAxis: {},
        series: [
            {
            type: 'scatter',
            data: this.sales_customers
            }
        ]
      }
      this.chartInstance.setOption(initOptiona)

      this.chartInstance = this.$echarts.init(this.$refs.bar,'walden')
      const initOptionb = {
        title: {
          text: '▎Sales',
        },
        grid: {
          top: '20%',
          left: '3%',
          right: '6%',
          bottom: '3%',
          containLabel: true // 距离是包含坐标轴上的文字
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          left: 'center'
        },
        xAxis: {
            type:'category'
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
            type: 'bar',
            data: this.sales
            }
        ]
      }
      this.chartInstance.setOption(initOptionb)
    },
  }
}
</script>


<style scoped>
.com-chart {
  margin: auto;
  margin-top:50px;
  display: flex;
  width: 80%;
}
.bar {
  flex: 1; 
  height: 500px;
  width: 500px; 
}
.scatter {
  flex: 1; 
  height: 500px;
  width: 500px; 
}
</style>
